import React, { useState } from 'react';
import { Card, Table, Button, Icon } from 'antd';
import Pagination from '@/components/Pagination';
import { ModalTypes } from './modalTypes';
import styles from './index.less';

const DelayedTable = ({ title, type, hasExpand }) => {
    const [query, setQuery] = useState({
        id: '',
        pageNo: 1,
        pageSize: 10
    });
    const [expand, setExpand] = useState(!hasExpand);
    // 分页操作
    const handlePaginationChange = _pagination => {
        console.log('handlePaginationChange -> pagination', _pagination);
        const { current, ...rest } = _pagination;
        setQuery({
            ...query,
            ...rest,
            pageNo: current
        });
    };
    const data = [
        {
            id: 1,
            taskNo: 'RW61524851',
            taskName: '工作管理原型设计工作管理原型设计工作管理原型设计工作管理原型设计工作管理原型设计',
            executor: '王菲',
            department: '产品部',
            startTime: '06-08 09:00'
        },
        {
            id: 2,
            taskNo: 457123,
            taskName: '工作管理设计',
            executor: '王三',
            department: '产品部',
            startTime: '06-09 09:00'
        },
        {
            id: 3,
            taskNo: 457123,
            taskName: '工作管理设计',
            executor: '王三',
            department: '产品部',
            startTime: '06-09 09:00'
        },
        {
            id: 4,
            taskNo: 457123,
            taskName: '工作管理设计',
            executor: '王三',
            department: '产品部',
            startTime: '06-09 09:00'
        },
        {
            id: 5,
            taskNo: 457123,
            taskName: '工作管理设计',
            executor: '王三',
            department: '产品部',
            startTime: '06-09 09:00'
        },
        {
            id: 6,
            taskNo: 457123,
            taskName: '工作管理设计',
            executor: '王三',
            department: '产品部',
            startTime: '06-09 09:00'
        }
    ];

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 70
        },
        {
            title: '任务编号',
            dataIndex: 'taskNo',
            width: 120
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            // width: '40%',
            // render: text => <a>{text}</a>
            render: text => (
                <div
                    style={{
                        width: '100%',
                        minWidth: 120,
                        position: 'relative'
                    }}
                >
                    <a
                        style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            transform: 'translateY(-50%)',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}
                        title={text}
                    >
                        {text}
                    </a>
                </div>
            )
        },
        {
            title: '执行人',
            dataIndex: 'executor',
            width: 100
        },
        {
            title: '部门',
            dataIndex: 'department',
            width: 120
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            width: 150
        }
    ];
    const getColumns = () => {
        switch (type) {
            case ModalTypes.TURN_PROGRESS_3.key:
            case ModalTypes.AUDIT_REFUSE.key:
            case ModalTypes.TURN_DONE_3.key:
                return columns;
            case ModalTypes.TURN_DONE_1.key:
            case ModalTypes.CANCEL_3.key:
                return columns.slice(0, 5);
            default:
                return [];
        }
    };
    const getY = () => (expand ? 270 : 54);
    const handleExpand = () => {
        setExpand(!expand);
    };

    return (
        <Card bordered={false} className={styles.delayedForm}>
            <div style={{ paddingBottom: 10 }}>{title}</div>
            <Table
                rowKey="id"
                bordered={false}
                columns={getColumns()}
                // loading={taskLoading}
                dataSource={data}
                pagination={false}
                scroll={{ y: getY() }}
            />
            {((hasExpand && expand) || !hasExpand) && (
                <Pagination
                    total={6}
                    current={Number(query.pageNo)}
                    pageSize={Number(query.pageSize)}
                    onChange={handlePaginationChange}
                    // loading={taskLoading}
                />
            )}

            {hasExpand && (
                <div className={styles.moreButton}>
                    <Button type="link" onClick={handleExpand}>
                        {expand ? '收起' : '查看更多'}
                        {expand ? <Icon type="up" /> : <Icon type="down" />}
                    </Button>
                </div>
            )}
        </Card>
    );
};

export default DelayedTable;
